<template>
  <el-dialog
      :close-on-click-modal="false"
      :visible.sync="materialIdVisible"
      :before-close="handleClose"
      top="5vh"
      append-to-body
    >
    <template slot="title">
        <div :style="titleColor">搜索</div>
      </template>
      <el-form :inline="true" class="demo-form-inline filter">
        <el-form-item label="物料名称">
          <el-input
            v-model="listQuery.fgoodname"
            clearable
            class="filter-item note"
            placeholder="请输入物料名称"
          />
        </el-form-item>
        <el-form-item label="存储分类">
        <el-select v-model="listQuery.fstorageflag" filterable clearable class="filter-item" placeholder="存储分类">
          <el-option v-for="item in getListfstorageflag" :key="item.value" :label="item.label" :value="item.value"/>
        </el-select>
      </el-form-item>
        <el-form-item>
          <el-button
            round
            size="medium"
            class="filter-item"
           :style="{background:buttonColor.lookup,color:buttonColor.color}"
            @click="searchFilteruse"
          >查找</el-button
          >
        </el-form-item>
      </el-form>

      <!-- 查询结果 -->
      <el-table
        v-loading="listLoading"
        :data="searchList"
        :header-cell-style="tableColor"
        stripe
        element-loading-text="正在查询中。。。"
        border
        fit
        highlight-current-row
        height="300"
      >
        <el-table-column align="center" label="物料编号" prop="fgoodno" />
        <el-table-column align="center" label="物料名称" prop="fgoodname" />
        <el-table-column align="center" :formatter="formatfstorageflag" label="存储分类" prop="fstorageflag" />
        <el-table-column align="center" label="CAS号" prop="fcasno" />
        <el-table-column
          align="center"
          label="选择"
          class-name="small-padding"
        >
          <template slot-scope="scope">
            <el-button
              type="primary"
              round
              size="small"
              class="button-margin"
               :style="{background:buttonColor.confirm,color:buttonColor.color}"
              @click="searchDatause(scope.row)"
            >确定</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="listQuery.page"
        :limit.sync="listQuery.limit"
        style="padding:14px 10px !important"
        @pagination="getSearchListuse"
      />
    </el-dialog>
</template>

<script>
import { listgoodInfo } from '@/api/goodInfo'
import { getListArea } from '@/api/area'
import Pagination from '@/components/Pagination'
import { titleColor,buttonColor } from "@/filters/index";
export default {
  name: 'Material',
  components: { Pagination },
  props:{
    materialIdVisible: {
      required: true,
      type: Boolean
    },
    tableColor: {
      required: true,
      type: Object
    },
    fsiteNo: {
      required: true,
    },
  },
  data(){
    return{
      titleColor,
      buttonColor,
      getListfstorageflag:undefined,
      searchList: null,
      listLoading: true,
      total: 0,
      listQuery: {
        page: 1,
        limit: 20,
        fsiteNo: undefined,
        fgoodname: undefined,
        fsupno:undefined,
        getListfstorageflag:undefined,
        fstorageflag:undefined,
        sort: 'create_time',
        order: 'desc'
      },
    }
  },
  created() {
    this.getSearchListuse()
    //存储分类
      getListArea({flag:28})
        .then(response => {
          this.getListfstorageflag = response.data.data.list
        })
        .catch(() => {
          this.getListfstorageflag = []
        })
  },
  watch: {
    fsiteNo: function() {
      this.getSearchListuse()
    },
  },
  methods: {
    getSearchListuse() {
      this.listLoading = true
      this.listQuery.fsiteNo = this.fsiteNo
       listgoodInfo(this.listQuery)
      .then(response => {
        this.searchList = response.data.data.list
        this.total = response.data.data.total
        this.listLoading = false
      })
      .catch(() => {
        this.searchList = []
        this.total = 0
          this.listLoading = false
      })

    },

    // 存储分类
    formatfstorageflag: function (row, column) {
      if (this.getListfstorageflag.length > 0) {
        for (let i = 0; i < this.getListfstorageflag.length; i++) {
          if (row.fstorageflag === this.getListfstorageflag[i].value) {
            return this.getListfstorageflag[i].label;
          }
        }
        return "";
      } else {
        return "";
      }
    },

    searchFilteruse() {
      this.listQuery.page = 1
      this.getSearchListuse()
    },

    // 物料选择
    searchDatause(row) {
      // 更新父组件materialIdVisible字段
       this.$emit('update:materialIdVisible', false)
       // 向父组件返回数据
      this.$emit('materialDialog', { data: row })
    },

    // 弹窗点击关闭前的回调
    handleClose(){
      this.$emit('update:materialIdVisible', false)
    }

  }
}
</script>
